<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
    }">
		<view :style="{
	  height: statusBarHeight + 'px',
	}">
		</view>
		<view class="head" :style="{
		  top: statusBarHeight + 'px',
		}">
			<view class="head_left">
				<u-icon name="arrow-left" color="#000" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">星球成员</view>
			<view class="head_right" @click="toInvite">
				邀请成员
			</view>
		</view>
		<view class="blacklist" v-if="shenfen != 0">
			<view class="blacklist_item" @click="toBlack">
				<view class="item_left">
					黑名单成员
				</view>
				<view class="item_right">
					<u-icon name="arrow-right" color="#ADADAD" size="22"></u-icon>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="item" v-for="(item,index) in listT">
				<view class="item_title" v-if="item.shenfen">
					{{shenfenBg[item.shenfen-1].name}}
				</view>
				<view class="box_content">
					<view class="box_item">
						<view class="item_url" v-if="item.user">
							<image :src="item.user.avatar_url" mode=""></image>
						</view>
						<view class="item_name">
							{{item.user.nick_name}}
						</view>
						<view class="item_shenfen" v-if="item.shenfen" :style="{
							color:shenfenBg[item.shenfen-1].color,
							'background':shenfenBg[item.shenfen-1].bg
						}">
							{{shenfenBg[item.shenfen-1].name}}
						</view>
						<view class="item_right" @click="operate(item,1)" v-if="item.shenfen != 3 && shenfen != 0">
							<u-icon name="more-dot-fill" color="#000" size="24"></u-icon>

							<template v-if="shenfen == 3">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" v-if="item.shenfen != 2" @click="setShenfen(2,item)">
										设为舰长
									</view>
									<view class="operate_item" :style="{
										color:'#EE6060'
									}" v-else @click="setShenfen(0,item)">
										取消舰长身份
									</view>
									<view class="operate_item" v-if="item.shenfen != 1" @click="setShenfen(1,item)">
										设为星杖
									</view>
									<view class="operate_item" :style="{
										color:'#EE6060'
									}" v-else @click="setShenfen(0,item)">
										取消星杖身份
									</view>
									<view class="operate_item" @click="jiangli(1,item)">
										奖励积分
									</view>
									<view class="operate_item" @click="jiangli(2,item)">
										扣除积分
									</view>
								</view>
							</template>
							<template v-if="shenfen == 2">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" @click="jiangli(1,item)">
										奖励积分
									</view>
								</view>
							</template>
							<template v-if="shenfen == 1">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" @click="jiangli(2,item)">
										扣除积分
									</view>
									<view class="operate_item" @click="hanProhibition(item)">
										禁言成员
									</view>
									<view class="operate_item" @click="handBlock(item)">
										拉黑成员
									</view>
									<view class="operate_item" :style="{
										color:'#EE6060'
									}" @click="yichu(item)">
										移除星球
									</view>
								</view>
							</template>

						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="item_title">
					星球成员
				</view>
				<view class="box_content" v-for="(item,index) in list" v-if="item.user" :key="index">
					<view class="box_item">
						<view class="item_url" v-if="item.user">
							<image :src="item.user.avatar_url" mode=""></image>
						</view>
						<view class="item_name" v-if="item.user">
							{{item.user.nick_name}}
						</view>
						<view class="item_shenfen" v-if="item.status == 1" :style="{
							color:'#888888',
							'background':'#EEEEEE'
						}">
							已禁言
						</view>
						<view class="item_right" @click="operate(item,2)" v-if="shenfen != 0">
							<u-icon name="more-dot-fill" color="#000" size="24"></u-icon>

							<template v-if="shenfen == 3">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" @click="setShenfen(2,item)">
										设为舰长
									</view>
									<view class="operate_item" @click="setShenfen(1,item)">
										设为星杖
									</view>
									<view class="operate_item" @click="jiangli(1,item)">
										奖励积分
									</view>
									<view class="operate_item" @click="jiangli(2,item)">
										扣除积分
									</view>
								</view>
							</template>
							<template v-if="shenfen == 2">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" @click="jiangli(1,item)">
										奖励积分
									</view>
								</view>
							</template>
							<template v-if="shenfen == 1">
								<view class="operate" v-if="item.isOpen">
									<view class="operate_item" @click="jiangli(2,item)">
										扣除积分
									</view>
									<view class="operate_item" :style="{
										color:'#EE6060'
									}" v-if="item.status == 1" @click="jiechujinyan(item)">
										解除禁言
									</view>
									<view class="operate_item" @click="hanProhibition(item)" v-else>
										禁言成员
									</view>
									<view class="operate_item" @click="handBlock(item)">
										拉黑成员
									</view>
									<view class="operate_item" :style="{
										color:'#EE6060'
									}" @click="yichu(item)">
										移除星球
									</view>
								</view>
							</template>


						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="show = false" @open="open" :closeable="true">
			<view class="box_pop">
				<view class="pop_head">
					积分{{typeName}}
				</view>
				<view class="pop_yue">
					<view class="yue_title">
						积分余额
					</view>
					<view class="yue_text">
						<view class="text1">
							{{point}}
						</view>
						积分
					</view>
				</view>
				<view class="xing_pop">
					<view class="xing_left">
						{{typeName}}积分成员
					</view>
					<view class="xing_right">
						<image :src="user.avatar_url" mode=""></image>
						{{user.nick_name}}
					</view>
				</view>
				<view class="label_pop">
					积分数额 <text style="color:#EE6060;font-size: 32rpx;margin-left: 4rpx;">*</text>
				</view>
				<view class="inp_pop">
					<u--input :placeholder="`请输入将要${typeName}的积分数额`" border="none" clearable v-model="value"
						type="number">
						<view class="suffix11" slot="suffix">
							积分
						</view>

					</u--input>
				</view>

				<view class="pup_btn">
					<view class="btn" @click="submit">
						确认{{typeName}}
					</view>
				</view>

			</view>
		</u-popup>
		
		
		<u-popup :show="show1" @close="show1 = false" @open="open1" :closeable="true">
			<view class="box_pop1">
				<view class="pop_head">
					禁言天数
				</view>
				<!-- <view class="pop_yue">
					<view class="yue_title">
						积分余额
					</view>
					<view class="yue_text">
						<view class="text1">
							{{point}}
						</view>
						积分
					</view>
				</view> -->
				<!-- <view class="xing_pop">
					<view class="xing_left">
						{{typeName}}积分成员
					</view>
					<view class="xing_right">
						<image src="../../static/images/pic_sy_jishao_tuone.png" mode=""></image>
						华胥星球
					</view>
				</view> -->
				<view class="label_pop">
					禁言天数 <text style="color:#EE6060;font-size: 32rpx;margin-left: 4rpx;">*</text>
				</view>
				<view class="inp_pop">
					<u--input :placeholder="`请输入要禁言的天数`" border="none" clearable v-model="value1"
						type="number">
						<view class="suffix11" slot="suffix">
							天
						</view>
		
					</u--input>
				</view>
		
				<view class="pup_btn">
					<view class="btn" @click="submit2">
						确认{{typeName}}
					</view>
				</view>
		
			</view>
		</u-popup>
		
		<u-modal :show="show2" :title="title" :content='content'>
			<view slot="default">
				{{content}}
			</view>
			<view class="confirmButton" slot="confirmButton">
				<view class="button_colse" @click="show2 = false"> 
					取消
				</view>
				<view class="xian">
					
				</view>
				<view class="button_submit" @click="submit1">
					确定
				</view>
			</view>
		</u-modal>
	<floatingBall></floatingBall>
	</view>
</template>

<script>
	import {
		userList,
		setShenfen,
		lahei,
		jinyan,
		tichu,
		jiechujinyan,
		point_yue,
		point_send,
		point_deduct
	} from '@/common/api/start.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				id: -1,
				listT: [],
				list: [],
				shenfenBg: [{
					color: '#C999FF',
					bg: 'rgba(201,153,255,0.302)',
					name: '星杖'
				}, {
					color: '#99BBFF',
					bg: 'rgba(153,187,255,0.302)',
					name: '舰长'
				}, {
					color: '#FFB65E',
					bg: 'rgba(255,182,94,0.302)',
					name: '星主'
				}],
				shenfen: -1,
				user_id: -1,
				show: false,
				show1:false,
				value1:'',
				point: 0,
				value: '',
				typeName: '奖励',
				user: {

				},
				show2:false,
				content:'',
				title:'提示',
				type:-1,
				modelType:'',
			}
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			const windowHeihgt = statusBarHeight.windowHeight;
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
		},
		onLoad(options) {
			if (options && options.id) {
				// userList
				this.id = options.id;
				this.shenfen = options.shenfen;
				this.user_id = options.user_id;
				this.getList();
				this.pointF();
			}
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			toBlack() {
				uni.navigateTo({
					url: "/pages/distinguish/blacklist?id=" + this.id
				})
			},
			toInvite() {
				uni.navigateTo({
					url: "/pages/distinguish/invitelist?id=" + this.id
				})
			},
			pointF() {
				point_yue({
					id: this.id
				}).then(res => {
					console.log('resssss', res);
					this.point = res.data.point;
				}).catch(err => {
					console.log('errrr', err);
				})
			},
			getList() {
				userList({
					type: 1,
					xinghe_id: this.id
				}).then(res => {
					this.listT = res.data.list.data.filter((item) => {
						return item.shenfen != 0;
					});
					this.list = res.data.list.data.filter((item) => {
						return item.shenfen == 0;
					});

					// this.chongzhi();
					this.listT = this.listT.map((item) => {
						return {
							...item,
							isOpen: false
						}
					})

					this.list = this.list.map((item) => {
						return {
							...item,
							isOpen: false
						}
					})
				})
			},
			chongzhi() {
				// this.listT.forEach((item) => {
				// 	item.isOpen = false;
				// })
				// this.list.forEach((item) => {
				// 	item.isOpen = false;
				// })

				this.listT = this.listT.map((item) => {
					return {
						...item,
						isOpen: false
					}
				})

				this.list = this.list.map((item) => {
					return {
						...item,
						isOpen: false
					}
				})
			},
			operate(item, type) {
			
				this.chongzhi();
				if (type == 1) {
					const i = this.listT.findIndex((val) => {
						return val.id == item.id
					});
					if (!item.isOpen) {
						this.listT[i].isOpen = true;
					}
				} else {
					const i = this.list.findIndex((val) => {
						return val.id == item.id
					});
					// this.list[i].isOpen = !this.listT[i].isOpen;
					if (!item.isOpen) {
						this.list[i].isOpen = true;
					}
				}
			},
			open() {
				this.show = true;
			},
			open1() {
				this.show1 = true;
			},
			jiangli(type, items) {
				console.log('tttttype', type, items);
				if (type == 1) {
					this.typeName = '奖励'
				} else if (type == 2) {
					this.typeName = '扣除'
				}
				this.user = items.user
				this.show = true;
			},
			//更改身份
			setShenfen(type, item) {
				console.log('itememmeme', item);
				if (type == 0) {
					this.content = '是否取消该成员星杖/舰长身份？';
				}else {
					this.content = '是否确定将该成员设为星杖/舰长？';
				}
				this.modelType = "shenfen";
				this.user = item.user;
				this.type = type;
				this.show2 = true;
			},
			yichu(item) {
				this.show2 = true;
				this.content = '是否确定将该成员移出星球？'
				this.modelType = "yichu";
				this.user = item;
			},
			//拉入黑名单
			handBlock(item) {
				this.show2 = true;
				this.content = '是否确定将该成员拉入黑名单？'
				this.modelType = "lahei";
				this.user = item;
				return;
				
			},
			//解除禁言
			jiechujinyan(item) {
				
				
				this.show2 = true;
				this.content = '是否确定要解除禁言该成员？'
				this.modelType = "jiechujinyan";
				this.user = item;
				
				
			},
			//禁言
			hanProhibition(item) {
				console.log('itemitem', item);
				// this.show2 = true;
				this.content = '是否确定要禁言该成员？'
				this.modelType = "jinyan";
				this.user = item;
				
				this.show1 = true;
				
				
			},
			submit() {
				if (this.typeName == '奖励') {
					this.sned();
				} else {
					this.deduct();
				}
			},
			sned() {
				point_send({
					xinghe_id: this.id,
					user_id: this.user.user_id,
					number: this.value
				}).then(res => {
					uni.$u.toast('奖励成功');
					this.pointF()
					this.show = false;
				}).catch(err => {
					uni.$u.toast(err);
				})
			},
			deduct() {
				point_deduct({
					xinghe_id: this.id,
					user_id: this.user.user_id,
					number: this.value
				}).then(res => {
					uni.$u.toast('扣除成功');
					this.show = false;
					this.pointF()
				}).catch(err => {
					uni.$u.toast(err);
				})
			},
			submit1() {
				if (this.modelType == 'shenfen') {
					this.shenfenSubmit();
				}else if (this.modelType == 'lahei') {
					this.laheiSubmit();
				}else if (this.modelType == 'jinyan') {
					this.jinyanSubmit();
				}else if (this.modelType == 'jiechujinyan') {
					this.jiechujinyanSubmit();
				}else if (this.modelType == 'yichu') {
					this.yichuSubmit();
				}
			},
			submit2() {
				this.show2 = true;
			},
			shenfenSubmit() {
				setShenfen({
					xinghe_id: this.id,
					user_id: this.user.user_id,
					shenfen: this.type
				}).then(res => {
					console.log('ressssss', res);
					this.getList();
					this.show2 = false;
				}).catch(err => {
					console.log('errrrrr', err);
					uni.$u.toast(err);
					this.show2 = false;
				})
			},
			laheiSubmit() {
				lahei({
					xinghe_id: this.id,
					user_id: this.user.user.user_id
				}).then(res => {
					console.log('resssss', res);
				
					const i = this.list.findIndex((val) => {
						return val.id == this.user.id
					})
					this.list.splice(i, 1);
					uni.$u.toast('拉黑成功');
					this.show2 = false;
				}).catch(err => {
					this.show2 = false;
					uni.$u.toast(err);
				})
			},
			jinyanSubmit() {
				const i = this.list.findIndex((val) => {
					return val.id == this.user.id;
				})
				jinyan({
					xinghe_id: this.id,
					user_id: this.user.user.user_id,
					day: this.value1
				}).then(res => {
					this.list[i].status = 1;
					uni.$u.toast('禁言成功');
					console.log('resssss', res);
					this.show2 = false;
					this.show1 = false;
				}).catch(err => {
					uni.$u.toast(err);
					this.show2 = false;
					
				})
			},
			jiechujinyanSubmit() {
				const i = this.list.findIndex((val) => {
					return val.id == this.user.id;
				})
				jiechujinyan({
					xinghe_id: this.id,
					user_id: this.user.user.user_id
				}).then(res => {
					this.list[i].status = 0;
					uni.$u.toast('解除成功');
					this.show2 = false;
				}).catch(err => {
					uni.$u.toast(err);
					this.show2 = false;
				})
			},
			yichuSubmit() {
				tichu({
					xinghe_id: this.id,
					user_id: this.user.user.user_id
				}).then(res => {
					console.log('resssss', res);
				
					const i = this.list.findIndex((val) => {
						return val.id == this.user.id
					})
					this.list.splice(i, 1);
					uni.$u.toast('移出成功');
					this.show2 = false;
				}).catch(err => {
					this.show2 = false;
					uni.$u.toast(err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #55B877;
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
		}
	}

	.blacklist {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.blacklist_item {
			width: 100%;
			height: 106rpx;
			background: #F7F8FA;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			padding: 0 32rpx;
			box-sizing: border-box;
		}
	}

	.box {
		width: 100%;
		padding: 0 30rpx 80rpx;
		box-sizing: border-box;
		
		.item {
			width: 100%;
		}

		.item_title {
			padding: 32rpx 0 24rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			box-sizing: border-box;
		}

		.box_content {
			width: 100%;
			margin-bottom: 32rpx;

			.box_item {
				display: flex;
				align-items: center;
				position: relative;

				.item_url {
					width: 100rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.item_name {
					margin-left: 24rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #444444;
				}

				.item_shenfen {
					width: 68rpx;
					height: 36rpx;
					background: rgba(255, 182, 94, 0.302);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFB65E;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 16rpx;
				}

				.item_shenfen {
					width: 92rpx;
					height: 36rpx;
					background: rgba(255, 182, 94, 0.302);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFB65E;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 16rpx;
				}

				.item_right {
					position: absolute;
					right: 0;
					height: 40rpx;
					width: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.operate {
						position: absolute;
						right: 0;
						top: 50rpx;
						width: 240rpx;
						// height: 419rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						background: #fff !important;
						z-index: 999;

						.operate_item {
							width: 100%;
							border-bottom: 1rpx solid #eee;
							padding: 30rpx 0;
							box-sizing: border-box;
							display: flex;
							justify-content: center;
							font-size: 30rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #444444;
						}
					}
				}
			}
		}
	}

	.box_pop {
		width: 100%;
		height: 1273rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;

		.pop_head {
			width: 100%;
			padding: 40rpx 0 32rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			display: flex;
			justify-content: center;
		}

		.pop_yue {
			width: 100%;
			height: 262rpx;
			background-image: url("/static/images/bg_jf_ye_bg.png");

			// background: url("/static/images/index.png") no-repeat;
			// background: url("/static/images/bg_jf_ye_bg.png") no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			padding-top: 68rpx;
			padding-left: 40rpx;
			box-sizing: border-box;

			.yue_title {
				width: 100%;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.yue_text {
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.text1 {
					font-size: 80rpx;
					font-family: DIN, DIN;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 8rpx;
				}
			}
		}

		.xing_pop {
			width: 100%;
			height: 106rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			.xing_left {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}

			.xing_right {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
				display: flex;
				align-items: center;

				image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}

		.label_pop {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			margin-top: 56rpx;
		}

		.inp_pop {
			width: 100%;
			height: 96rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.suffix11 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}
		}

		.pup_btn {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 60rpx 80rpx;
			box-sizing: border-box;

			.btn {
				width: 100%;
				height: 96rpx;
				background: #FF8A4C;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}
	
	
	.box_pop1 {
		width: 100%;
		height: 673rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
	
		.pop_head {
			width: 100%;
			padding: 40rpx 0 32rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			display: flex;
			justify-content: center;
		}
	
		.pop_yue {
			width: 100%;
			height: 262rpx;
			background-image: url("/static/images/bg_jf_ye_bg.png");
	
			// background: url("/static/images/index.png") no-repeat;
			// background: url("/static/images/bg_jf_ye_bg.png") no-repeat;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			padding-top: 68rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
	
			.yue_title {
				width: 100%;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
	
			.yue_text {
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
	
				.text1 {
					font-size: 80rpx;
					font-family: DIN, DIN;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 8rpx;
				}
			}
		}
	
		.xing_pop {
			width: 100%;
			height: 106rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
	
			.xing_left {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}
	
			.xing_right {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
				display: flex;
				align-items: center;
	
				image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}
	
		.label_pop {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
			margin-top: 56rpx;
		}
	
		.inp_pop {
			width: 100%;
			height: 96rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 1rpx solid #E5E5E5;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
	
			.suffix11 {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}
		}
	
		.pup_btn {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 60rpx 80rpx;
			box-sizing: border-box;
	
			.btn {
				width: 100%;
				height: 96rpx;
				background: #FF8A4C;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	
	}
	
	/deep/ .u-fade-enter-active {
		z-index: 10075 !important;
	}

	/deep/ .u-modal__button-group--confirm-button {
		padding: 0;
		box-sizing: border-box;
	}

	.confirmButton {
		width: 100%;
		height: 112rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding: 0 !important;
		box-sizing: border-box;

		.button_colse {
			width: 50%;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #272727;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.xian {
			width: 2rpx;
			height: 56rpx;
			background: #eee;
		}

		.button_submit {
			width: 50%;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #55B877;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>